<template>
  <div>
    <table border cellspacing="0">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>图片</th>
        </tr>
        <tr v-for="(obj,index) in dataList" :key="obj.id">
            <td>{{ index+1 }}</td>
            <td>{{ obj.name }}</td>
            <td>{{ obj.age }}</td>
           <td>
            <slot :row="obj">
            {{ obj.imgUrl }}
           </slot>
          </td>
        </tr>
    </table>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dataList :[{
        id: '1',
        name: '大大',
        age: '19',
        imgUrl: 'https://img1.baidu.com/it/u=4213537666,406265295&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679072400&t=844e54a6cbae418c7ca52260e386c963'
      },{
        id: '2',
        name: '胖达',
        age: '18',
        imgUrl: 'https://img0.baidu.com/it/u=2240687778,2023422083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
      },{
        id: '3',
        name: '白熊',
        age: '16',
        imgUrl: 'https://img1.baidu.com/it/u=4289695845,2474608469&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'  
      }]
        }
    }
}
</script>

<style scoped>
img{
    width: 100px;
}
</style>